<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
    <link href="js/bootstrap-validator/css/bootstrapValidator.css" rel="stylesheet">
</head>

<body data-theme="default">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <jsp:include page="/WEB-INF/common.jsp"/>
        <!--左侧导航-->

        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">

                                        <input type="text" class="form-control" id="cnameInput" placeholder="请输入名称" oninput="findAllPage(1)">
                                    </div>
                                </form>
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">

                                        <input type="text" class="form-control" id="gnameInput" placeholder="请输入游戏名" oninput="findAllPage(1)">
                                    </div>
                                </form>
                            <div class="toolbar-btn-action">
                                <button id="addBtn" onclick="showAdd()" type="button" class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</button>

                            </div>
                            <div class="card-body">

                                <div class="table-responsive" id="Characters-table">


                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<%--添加模态框开始--%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加游戏人物</h4>
            </div>
            <div class="modal-body">
                <form id="AddFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="cnamenameadd">游戏人物名称</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="cnamenameadd" name="cnamenameadd" placeholder="请输入游戏人物名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label"  >游戏人物所属游戏</label>
                        <div class="col-md-7" id="employ-dar-select">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addCharac()">确定</button>
            </div>
        </div>
    </div>
</div>
<%--模态框结束--%>
<%--修改模态框开始--%>
<div class="modal fade" id="UpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >修改游戏人物</h4>
            </div>
            <div class="modal-body">
                <form id="UpdateFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="cnameUpdate">游戏人物名称</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="cnameUpdate" name="cnameUpdate" placeholder="请输入游戏人物名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >游戏人物所属游戏</label>
                        <div class="col-md-7" id="employ-dar-selectq">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateCharacters()">确定</button>
            </div>
        </div>
    </div>
</div>
<%--模态框结束--%>

<script type="text/javascript" src="js/bootstrap-validator/js/bootstrapValidator.js"></script>

<script type="text/html" id="all_Characters">
    <table class="table table-hover" >

        <tr>
            <th>游戏人物id</th>
            <th>游戏人物名称</th>
            <th>游戏人物所属游戏</th>
            <th>赛季人物是否能选用</th>
            <th>操作</th>
        </tr>


        {{each data.list}}
        <tr>
            <th scope="row">{{$value.cid}}</th>
            <td>{{$value.cname}}</td>
            <td>{{$value.games.gname}}</td>
            <td>

                {{if $value.cban == '1'}}
                <span class="label label-primary">可选</span>
                {{else}}
                <span class="label label-default">不可选</span>
                {{/if}}
                <%--{{$value.estate}}--%>
            </td>
            <td>
                {{if $value.cban == '1'}}
                <button type="button" class="btn btn-info btn-xs" onclick="showUpdate('{{$value.cid}}')">修改</button>
                <button type="button" class="btn btn-danger btn-xs" onclick="daleteById('{{$value.cid}}','{{data.pageNum}}')">禁用</button>
                {{else}}
                <button type="button" class="btn btn-info btn-xs" disabled="disabled">修改</button>
                <button type="button" class="btn btn-danger btn-xs" disabled="disabled">禁用</button>
                {{/if}}
            </td>
        </tr>
        {{/each}}


    </table>
    <nav class="text-center">
        <ul class="pagination pagination-circle">
            <%--上一页--%>
            {{if data.hasPreviousPage}}
            <li ><a href="javascript:void(0)" onclick="findAllPage('{{data.pageNum-1}}')"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{/if}}
            <%--标签--%>
            {{each data.navigatepageNums}}
            {{if $value == data.pageNum}}
            <li class="disabled active" ><a href="javascript:void(0)" >{{$value}}</a></li>
            {{else}}
            <li><a href="javascript:void(0)" onclick="findAllPage('{{$value}}')">{{$value}}</a></li>
            {{/if}}
            {{/each}}
            <%--  下一页--%>
            {{if data.hasNextPage}}
            <li><a href="javascript:void(0)" onclick="findAllPage('{{data.pageNum+1}}')"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{/if}}

        </ul>
    </nav>
</script>

<script type="text/html" id="example-select">
    <select class="form-control"  id="gidadd" name="gidadd" size="1">
        {{each data}}

        <option value="{{$value.gid}}" >{{$value.gname}}</option>
        {{/each}}
    </select>
</script>

<script type="text/html" id="example-select2">
    <select class="form-control"  id="gidUpdate" name="gidUpdate" size="1">
        {{each data}}

        <option value="{{$value.gid}}" >{{$value.gname}}</option>
        {{/each}}
    </select>
</script>

<script type="text/javascript">
    $("#UpdateFrom").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            cnameUpdate: {
                validators: {//从这里也可以容易的看出可以有多个验证信息
                    notEmpty: {//非空验证
                        message: "请输入人物名称！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                    stringLength: {//长度限制（中文字符也算一个）
                        min: 1,
                        max: 16,
                        message: "人物名长度只能在1到16位之间！！！"
                    }
                }
            },

        }})
    $("#AddFrom").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            cnamenameadd: {
                validators: {//从这里也可以容易的看出可以有多个验证信息
                    notEmpty: {//非空验证
                        message: "请输入人物名称！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                    stringLength: {//长度限制（中文字符也算一个）
                        min: 1,
                        max: 16,
                        message: "人物名长度只能在1到16位之间！！！"
                    }
                }
            },

        }})
    var cidupdate = 0;
    var cid2 = 0;
    // function dalete(cid,currentPage){
    //     $.alert({
    //         title: '删除',
    //         content: '您确认要删除吗',
    //         buttons: {
    //             confirm: {
    //                 text: '确认',
    //                 btnClass: 'btn-primary',
    //                 action: function(){
    //
    //                     $.ajax({
    //                         url:"admin/CharactersServlet?action=delCharacters",
    //                         type:'POST',
    //                         data: {cid:cid},
    //                         dataType:'JSON',
    //                         success:function (resp){
    //                             console.log(cid)
    //                             if(resp.code==10000){
    //                                 lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
    //                                 findAllPage(currentPage);
    //                             }else{
    //                                 lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
    //                             }
    //                         }
    //                     })
    //                 }
    //             },
    //             cancel: {
    //                 text: '取消'
    //             }
    //         }
    //     });
    //
    // }
    //确定按钮修改数据
    function updateCharacters(){
        $("#UpdateFrom").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#UpdateFrom").data('bootstrapValidator').isValid()){
        var serialize = $("#UpdateFrom").serialize();
        console.log(serialize)
        console.log("cid=" + cidupdate + "&" + serialize)
            var dataform = {
                cid: cidupdate,
                cname: $("#cnameUpdate").val(),
                gid: $("#gidUpdate").val()}
            console.log(dataform)
        $.ajax({
            url:"admin/CharactersServlet",
            type:'PUT',
            data: JSON.stringify(dataform),
            contentType: "application/json;charset=utf-8",
            dataType:'JSON',
            success:function (resp){
                if(resp.code==10000){
                    console.log(serialize)
                    console.log(dataform)
                    $("#UpdateModal").modal("hide")
                    //清空数据
                    $("#UpdateFrom")[0].reset();
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAllPage(1)
                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        })}
    }
    //展示修改模态框显示当前信息
    function showUpdate(cid){

        $.ajax({
            url:"admin/GamesController/findAll",
            type:'GET',

            dataType:'JSON',
            success:function (resp){
                $.ajax({
                    url:"admin/CharactersServlet/" +cid,
                    type:'GET',
                    data: {cid:cid},
                    dataType:'JSON',
                    success:function (resp){
                        cidupdate = resp.data.cid
                        if(resp.code==10000) {
                            console.log(resp.data.cid)
                            console.log(resp.data.gid)
                            $("#cnameUpdate").val(resp.data.cname)
                            // $("#eageUpdate").val(resp.data.eage)
                            // $("#interestUpdate").text(resp.data.interest)
                            // if (resp.data.interest == "感兴趣"){
                            //     $("#interests").prop("checked" ,true)
                            // }else {
                            //     $("#nointerests").prop("checked" ,true)
                            // }
                            $("#UpdateFrom select option[value='" + resp.data.gid + "']").prop("selected", true);
                            $("#updateModal").modal("show")
                        }else{
                            lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                        }
                    }
                })
                if(resp.code==10000){

                    console.log(resp)
                    //渲染数据
                    let sel = template('example-select2', {data:resp.data});
                    //挂在
                    $("#employ-dar-selectq").html(sel);
                    $("#UpdateModal").modal("show")

                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        });
    }
    //模态框确定按钮添加人物
    function addCharac(){
        $("#AddFrom").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#AddFrom").data('bootstrapValidator').isValid()){
        var serialize = $("#AddFrom").serialize();
        var datafor = {cname:$("#cnamenameadd").val(),gid:$("#gidadd").val()}
        console.log(serialize)
        $.ajax({
            url:"admin/CharactersServlet",
            type:'POST',
            data:JSON.stringify(datafor),
            contentType:"application/json;charset=utf-8",
            dataType:'JSON',
            success:function (resp){
                console.log($("#AddFrom").serialize())
                if(resp.code==10000){
                    $("#addModal").modal("hide")
                    //清空数据
                    $("#AddFrom")[0].reset();
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAllPage(1);
                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        })}
    }
    //按钮弹出添加模态框
    function showAdd(){

        $.ajax({
            url:"admin/GamesController/findAll",
            type:'GET',
            dataType:'JSON',
            success:function (resp){
                if(resp.code==10000){
                    console.log(resp)
                    //渲染数据
                    let sel = template('example-select', {data:resp.data});
                    //挂在
                    $("#employ-dar-select").html(sel);
                    $("#addModal").modal("show")

                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        });
    }

    //删除数据
    function daleteById(cid,pageNum){
        $.alert({
            title: '删除',
            content: '您确认要删除吗',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function(){

                        $.ajax({
                            url:"admin/CharactersServlet/" +cid,
                            type:'POST',
                            data: {cid:cid},
                            dataType:'JSON',
                            success:function (resp){
                                if(resp.code==10000){
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                    console.log("111111111")
                                    findAllPage(pageNum)
                                }else{
                                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });

    }
    // function findAll(){
    //     //发送ajax请求
    //     $.ajax({
    //         url:"admin/CharactersServlet?action=findAll",
    //         type:'POST',
    //         dataType:'JSON',
    //         success:function (resp){
    //             if(resp.code==10000){
    //                 console.log(resp)
    //                 //渲染数据
    //                 let table = template('all_Characters', {data:resp.data});
    //                 //挂在
    //                 $("#Characters-table").html(table);
    //
    //             }else{
    //                 lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
    //             }
    //         }
    //     });
    // }

    //页面加载时获取并渲染人物数据
    // findAll();
    function findAllPage(pagecou){
        //发送ajax请求
        $.ajax({
            url:"admin/CharactersServlet/page",
            type:'GET',
            dataType:'JSON',
            data: {pagecou:pagecou,cname:$("#cnameInput").val(),gname:$("#gnameInput").val()},
            success:function (resp){

                //渲染数据
                let table = template('all_Characters', {data:resp.data});
                console.log()
                //挂在
                $("#Characters-table").html(table);
            }
        });
    }

    findAllPage(1)
</script>
</body>
</html>